<template>
	<view class="page_bg">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="top_nav">
			<image src="/static/local/3546451940011a031009b939a8b26314.png" class="image_1" @click="pageBack" />
			<view class="cate">{{pageTitle}}</view>
		</view>
		<view class="flex-col group_1">
			<text class="text_1">{{detail.title}}</text>
			<view class="center-group flex-col view">
				<view class="flex-col group_2">
					<view class="justify-between">
						<view class="flex-row">
							<text class="text_2">总分：</text>
							<text class="text_3">{{totalPrice}}分</text>
						</view>
						<view class="flex-row group_5">
							<text class="text_4">考试时间：</text>
							<text class="text_5">{{detail.time_out}}分钟</text>
						</view>
					</view>
					<view class="justify-between group_6">
						<view class="flex-row">
							<text class="text_6">题量：</text>
							<text class="text_7" v-if="detail.questions">{{detail.questions.length}}</text>
						</view>
						<view class="flex-row group_8">
							<text class="text_8">试卷类型：</text>
							<text class="text_9">{{pageTitle}}</text>
						</view>
					</view>
				</view>
				<view class="flex-row group_9">
					<view class="flex-col items-center text-wrapper" @tap="starDo(0)">
						<text>练习模式</text>
					</view>
					<view class="flex-col items-center text-wrapper_1" @tap="starDo(1)">
						<text>考试模式</text>
					</view>
				</view>
			</view>
			<image src="/static/local/0cec384fa1c7befc3fb0a06c13233461.png" class="image_2" />
			<view class="center-group flex-col view_1">
				<view class="flex-row group_10">
					<image src="/static/local/3aa07251028c2ee9d409337d259cb3f9.png" class="image_3" />
					<text class="text_12">题型介绍</text>
				</view>
				<view class="flex-col list">
					<view class="list-item flex-col" v-if="single.length > 0">
						<text class="text_13">
							单选题（每题{{single[0].score}}分，共{{single.length}}题，共{{single.length * single[0].score}}分)
						</text>
						<text class="text_15">在每小题列出的四个备选项中只有一个是符合题目要求的，请将其选出，选错、未选均无分。</text>
					</view>
					<view class="list-item flex-col" v-if="more.length > 0">
						<text class="text_13">
							多选题（每题{{more[0].score}}分，共{{more.length}}题，共{{more.length * more[0].score}}分)
						</text>
						<text class="text_15">在每小题列出的四个备选项中有多个是符合题目要求的，请将其选出，选错、未选或多选均无分。</text>
					</view>
					<view class="list-item flex-col" v-if="judge.length > 0">
						<text class="text_13">
							判断题（每题{{judge[0].score}}分，共{{judge.length}}题，共{{judge.length * judge[0].score}}分)
						</text>
						<text class="text_15">判断题目所述是否正确并请将答案选出，选错、未选均无分。</text>
					</view>
					<!-- <view class="list-item flex-col" v-if="answer.length > 0">
						<text class="text_13">
							作答题（每题{{answer[0].score}}分，共{{answer.length}}题，共{{answer.length * answer[0].score}}分)
						</text>
						<text class="text_15">在每小题列出的四个备选项中只有一个是符合题目要求的，请将其选出，选错、未选或多选均无分。</text>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				pageTitle: '',
				examId: '',
				detail: [],
				totalPrice: 0,
				single: [],
				more: [],
				judge: [],
				answer: []
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				let str = ''
				switch (options.from) {
					case 'real':
						this.pageTitle = '历年真题'
						str = 'client/quest-bank/kh/real-exam/getOneRealExam'
						break
					case 'simulation':
						this.pageTitle = '模拟试题'
						str = 'client/quest-bank/kh/simulation/getOneSimulation'
						break
				}
				this.examId = options.id
				this.getInfo(options.id, str)
			},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getInfo(id, from) {
				vk.callFunction({
					url: from,
					data: { id },
					success(res) {
						that.detail = res.data
						res.data.questions.map(v => {
							that.totalPrice += Number(v.score)
							switch (v.type) {
								case '1':
									that.single.push(v)
									break
								case '2':
									that.more.push(v)
									break
								case '3':
									that.judge.push(v)
									break
								case '4':
									that.answer.push(v)
									break
							}
						})
					}
				})
			},
			// 开始做题
			starDo(num) {
				if (num == 1) {
					uni.navigateTo({
						url: `/pages/question-bank/exam-page?pageTitle=${this.pageTitle}&id=${this.examId}`
					});
					return
				}
				uni.navigateTo({
					url: `/pages/question-bank/practice-page?pageTitle=${this.pageTitle}&id=${this.examId}`
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		background-color: #ffffff;
		width: 100%;
		height: 100vh;
		overflow-y: auto;

		.status_bar,
		.top_view {
			background-color: #FFFFFF;
		}

		.top_nav {
			padding-bottom: 24rpx;
			color: rgb(51, 51, 51);
			font-size: 34rpx;
			line-height: 41rpx;
			white-space: nowrap;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 0px 0px 30rpx 30rpx;
			height: 90rpx;
			position: relative;

			.image_1 {
				left: 21rpx;
				top: 27rpx;
				width: 19rpx;
				height: 35rpx;
				position: absolute;
			}

			.cate {
				width: 100%;
				padding: 20rpx 0;
				color: rgb(51, 51, 51);
				font-size: 34rpx;
				font-weight: 500;
				line-height: 41rpx;
				white-space: nowrap;
				text-align: center;
			}
		}
	}

	.group_1 {
		padding: 38rpx 0 326rpx;
		flex: 1 1 auto;
		overflow-y: auto;

		.text_1 {
			margin-left: 20rpx;
			color: rgb(51, 51, 51);
			font-size: 32rpx;
			line-height: 38rpx;
			white-space: nowrap;
		}

		.center-group {
			padding: 0 30rpx;

			.group_2 {
				padding: 0 10rpx;

				.group_6 {
					margin-top: 23rpx;

					.group_8 {
						width: 50%;

						.text_8 {
							color: rgb(153, 153, 153);
							font-size: 28rpx;
							line-height: 34rpx;
							white-space: nowrap;
						}

						.text_9 {
							color: rgb(51, 51, 51);
							font-size: 28rpx;
							line-height: 34rpx;
							white-space: nowrap;
						}
					}

					.text_6 {
						color: rgb(153, 153, 153);
						font-size: 28rpx;
						line-height: 34rpx;
						white-space: nowrap;
					}

					.text_7 {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						line-height: 34rpx;
						white-space: nowrap;
					}
				}

				.group_5 {
					width: 50%;

					.text_4 {
						color: rgb(153, 153, 153);
						font-size: 28rpx;
						line-height: 34rpx;
						white-space: nowrap;
					}

					.text_5 {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						line-height: 34rpx;
						white-space: nowrap;
					}
				}

				.text_2 {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 34rpx;
					white-space: nowrap;
				}

				.text_3 {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					line-height: 34rpx;
					white-space: nowrap;
				}
			}

			.group_9 {
				margin-top: 56rpx;

				.text-wrapper {
					padding: 22rpx 0 20rpx;
					flex: 1 1 330rpx;
					color: rgb(51, 51, 51);
					font-size: 32rpx;
					line-height: 38rpx;
					white-space: nowrap;
					border-radius: 40rpx;
					background-image: url('../../static/local/5be8ee0c26bde528928f4b478072e4d3.png');
					background-position: 0px 0px;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					height: 80rpx;
				}

				.text-wrapper_1 {
					margin-left: 30rpx;
					padding: 22rpx 0 20rpx;
					flex: 1 1 330rpx;
					color: rgb(255, 255, 255);
					font-size: 32rpx;
					line-height: 38rpx;
					white-space: nowrap;
					background-color: rgb(51, 51, 51);
					border-radius: 40rpx;
					height: 80rpx;
				}
			}

			.group_10 {
				color: rgb(20, 0, 5);
				font-size: 32rpx;
				line-height: 38rpx;
				white-space: nowrap;

				.image_3 {
					margin: 9rpx 0;
					width: 20rpx;
					height: 20rpx;
				}

				.text_12 {
					margin-left: 12rpx;
				}
			}

			.list {
				margin-top: 45rpx;

				.list-item {
					&:not(:first-of-type) {
						margin-top: 56rpx;
					}

					.text_13 {
						color: rgb(20, 0, 5);
						font-size: 24rpx;
						line-height: 29rpx;
						white-space: nowrap;
					}

					.text_15 {
						margin-right: 13rpx;
						margin-top: 21rpx;
						color: rgb(102, 102, 102);
						font-size: 24rpx;
						line-height: 28rpx;
						text-align: left;
					}
				}
			}
		}

		.view {
			margin-top: 41rpx;
		}

		.image_2 {
			margin-top: 55rpx;
			width: 100vw;
			height: 0.5vw;
		}

		.view_1 {
			margin-top: 42rpx;
		}
	}
</style>
